<!--管理员课时调整页面-->

<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<input
				class="search-input"
				v-model="searchKeyword"
				placeholder="搜索学生姓名或手机号"
				@input="onSearch"
			/>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-cards">
			<view class="stat-card">
				<view class="stat-icon">
					<text class="icon-text">👥</text>
				</view>
				<view class="stat-content">
					<text class="stat-number">{{ stats.totalStudents }}</text>
					<text class="stat-label">总学生数</text>
				</view>
			</view>
			<view class="stat-card">
				<view class="stat-icon">
					<text class="icon-text">⏰</text>
				</view>
				<view class="stat-content">
					<text class="stat-number">{{ stats.totalHours }}</text>
					<text class="stat-label">总课时</text>
				</view>
			</view>
		</view>

		<!-- 筛选器 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view
					class="filter-tab"
					:class="{ active: currentFilter === 'all' }"
					@click="setFilter('all')"
				>
					<text class="tab-text">全部</text>
				</view>
				<view
					class="filter-tab"
					:class="{ active: currentFilter === 'low' }"
					@click="setFilter('low')"
				>
					<text class="tab-text">课时不足</text>
				</view>
				<view
					class="filter-tab"
					:class="{ active: currentFilter === 'expired' }"
					@click="setFilter('expired')"
				>
					<text class="tab-text">已用完</text>
				</view>
			</view>
		</view>

		<!-- 学生课时列表 -->
		<view class="student-list">
			<!-- 列表标题 -->
			<view class="list-header">
				<text class="list-title">学生列表</text>
				<text class="list-count">共 {{ filteredStudents.length }} 人</text>
			</view>

			<!-- 学生列表 -->
			<view v-if="!loading && filteredStudents && filteredStudents.length > 0">
				<view class="student-item" v-for="student in filteredStudents" :key="student.id">
					<view class="student-info">
						<image class="student-avatar" :src="student.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
						<view class="student-details">
							<text class="student-name">{{ student.studentName }}</text>
							<text class="student-phone">{{ student.parentPhone }}</text>
							<view class="hours-info">
								<text class="hours-label">剩余课时:</text>
								<text class="hours-number" :class="student.hoursClass">{{ student.remainingHours }}</text>
								<text class="hours-unit">课时</text>
							</view>
						</view>
					</view>
					<view class="student-actions">
						<button class="action-btn recharge-btn" @click="rechargeHours(student)">充值</button>
						<button class="action-btn adjust-btn" @click="adjustHours(student)">调整</button>
						<button class="action-btn detail-btn" @click="viewDetails(student)">详情</button>
					</view>
				</view>
			</view>

			<!-- 加载状态 -->
			<view v-else-if="loading" class="loading-state">
				<view class="loading-icon">⏳</view>
				<text class="loading-text">加载中...</text>
			</view>

			<!-- 空状态 -->
			<view v-else class="empty-state">
				<view class="empty-icon">📚</view>
				<text class="empty-title">暂无学生数据</text>
				<text class="empty-desc">当前筛选条件下没有找到学生</text>
			</view>
		</view>

		<!-- 批量操作按钮 -->
		<view class="batch-actions">
			<view class="batch-btn" @click="showBatchRechargeModal">
				<text class="batch-icon">💰</text>
				<text class="batch-text">批量充值</text>
			</view>
			<view class="batch-btn" @click="showBatchAdjustModal">
				<text class="batch-icon">⚙️</text>
				<text class="batch-text">批量调整</text>
			</view>
		</view>

		<!-- 批量充值弹窗 -->
		<view class="modal" v-if="showBatchRechargeModalFlag">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">批量充值</text>
					<text class="modal-close" @click="closeBatchRechargeModal">×</text>
				</view>

				<view class="form">
					<view class="form-item">
						<text class="form-label">充值课时</text>
						<input class="form-input" v-model="batchRechargeForm.hours" placeholder="请输入充值课时数" type="number" />
					</view>
					<view class="form-item">
						<text class="form-label">充值说明</text>
						<textarea class="form-textarea" v-model="batchRechargeForm.description" placeholder="请输入充值说明（可选）" />
					</view>
					<view class="form-item">
						<text class="form-label">选择学生</text>
						<view class="student-selector">
							<view
								class="student-option"
								v-for="student in filteredStudents"
								:key="student.id"
								:class="{ selected: selectedStudents.includes(student.id) }"
								@click="toggleStudent(student.id)"
							>
								<text class="option-name">{{ student.studentName }}</text>
								<text class="option-hours">{{ student.remainingHours }}课时</text>
							</view>
						</view>
					</view>
				</view>

				<view class="modal-actions">
					<button class="cancel-btn" @click="closeBatchRechargeModal">取消</button>
					<button class="confirm-btn" @click="confirmBatchRecharge">确认充值</button>
				</view>
			</view>
		</view>

		<!-- 批量调整弹窗 -->
		<view class="modal" v-if="showBatchAdjustModalFlag">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">批量调整</text>
					<text class="modal-close" @click="closeBatchAdjustModal">×</text>
				</view>

				<view class="form">
					<view class="form-item">
						<text class="form-label">调整类型</text>
						<picker class="form-picker" :value="batchAdjustForm.typeIndex" :range="adjustTypeOptions" @change="onBatchAdjustTypeChange">
							<view class="picker-text">{{ adjustTypeOptions[batchAdjustForm.typeIndex] }}</view>
						</picker>
					</view>
					<view class="form-item">
						<text class="form-label">调整课时</text>
						<input class="form-input" v-model="batchAdjustForm.hours" placeholder="请输入调整课时数" type="number" />
					</view>
					<view class="form-item">
						<text class="form-label">调整说明</text>
						<textarea class="form-textarea" v-model="batchAdjustForm.description" placeholder="请输入调整说明" />
					</view>
					<view class="form-item">
						<text class="form-label">选择学生</text>
						<view class="student-selector">
							<view
								class="student-option"
								v-for="student in filteredStudents"
								:key="student.id"
								:class="{ selected: selectedStudents.includes(student.id) }"
								@click="toggleStudent(student.id)"
							>
								<text class="option-name">{{ student.studentName }}</text>
								<text class="option-hours">{{ student.remainingHours }}课时</text>
							</view>
						</view>
					</view>
				</view>

				<view class="modal-actions">
					<button class="cancel-btn" @click="closeBatchAdjustModal">取消</button>
					<button class="confirm-btn" @click="confirmBatchAdjust">确认调整</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getApiUrl, API_CONFIG, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			// 搜索和筛选
			searchKeyword: '',
			currentFilter: 'all',

			// 统计数据
			stats: {
				totalStudents: 0,
				totalHours: 0
			},

			// 学生列表
			students: [],
			loading: false,

			// 批量操作
			selectedStudents: [],
			showBatchRechargeModalFlag: false,
			showBatchAdjustModalFlag: false,
			batchRechargeForm: {
				hours: '',
				description: ''
			},
			batchAdjustForm: {
				typeIndex: 0,
				hours: '',
				description: ''
			},
			adjustTypeOptions: ['增加课时', '减少课时']
		}
	},
	computed: {
		filteredStudents() {
			let filtered = this.students || []

			// 搜索过滤
			if (this.searchKeyword && this.searchKeyword.trim()) {
				filtered = filtered.filter(student =>
					student.studentName.includes(this.searchKeyword) ||
					student.parentPhone.includes(this.searchKeyword)
				)
			}

			// 状态过滤
			if (this.currentFilter === 'low') {
				filtered = filtered.filter(student => student.remainingHours > 0 && student.remainingHours <= 10)
			} else if (this.currentFilter === 'expired') {
				filtered = filtered.filter(student => student.remainingHours === 0)
			}

			return filtered
		}
	},
	onLoad() {
		this.loadStats()
		this.loadStudentList()
	},
	onShow() {
		// 每次显示页面时刷新数据
		this.loadStats()
		this.loadStudentList()
	},
	methods: {
		// 加载统计数据
		async loadStats() {
			try {
				console.log('开始加载统计数据...')
				const token = uni.getStorageSync('token')
				console.log('Token:', token)

				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADMIN_STATS),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				console.log('统计数据API响应:', response)

				if (response.code === 200) {
					this.stats = response.data
					console.log('统计数据加载成功:', this.stats)
				} else {
					console.error('统计数据加载失败:', response.message)
					uni.showToast({
						title: response.message || '获取统计数据失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载统计数据失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},

		// 加载学生列表
		async loadStudentList() {
			this.loading = true
			console.log('开始加载学生列表...')

			try {
				const token = uni.getStorageSync('token')
				console.log('Token:', token)

				// 构建查询参数
				const queryParams = {}
				if (this.searchKeyword) queryParams.keyword = this.searchKeyword
				queryParams.filter = this.currentFilter

				// 构建URL带查询参数
				let url = getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADMIN_STUDENTS)
				const queryString = Object.keys(queryParams)
					.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(queryParams[key])}`)
					.join('&')

				if (queryString) {
					url += '?' + queryString
				}

				const response = await apiRequest({
					url: url,
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				console.log('学生列表API响应:', response)

				if (response.code === 200) {
					this.students = (response.data || []).map(student => {
						return {
							...student,
							hoursClass: this.getHoursClass(student.remainingHours)
						}
					})
					console.log('学生列表加载成功，共', this.students.length, '人')
				} else {
					console.error('学生列表加载失败:', response.message)
					uni.showToast({
						title: response.message || '获取学生列表失败',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('加载学生列表失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		onSearch() {
			// 防抖搜索
			clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(() => {
				this.loadStudentList()
			}, 500)
		},

		setFilter(filter) {
			this.currentFilter = filter
			// 重新加载学生列表
			this.loadStudentList()
		},

		getHoursClass(hours) {
			if (hours === 0) return 'expired'
			if (hours <= 10) return 'low'
			return 'normal'
		},

		rechargeHours(student) {
			uni.navigateTo({
				url: `/pages/admin/student-hours?id=${student.id}`
			})
		},

		adjustHours(student) {
			uni.navigateTo({
				url: `/pages/admin/student-hours?id=${student.id}`
			})
		},

		viewDetails(student) {
			uni.navigateTo({
				url: `/pages/admin/student-history?studentId=${student.id}&studentName=${student.studentName}`
			})
		},

		showBatchRechargeModal() {
			this.showBatchRechargeModalFlag = true
			this.selectedStudents = []
			this.batchRechargeForm = {
				hours: '',
				description: ''
			}
		},

		closeBatchRechargeModal() {
			this.showBatchRechargeModalFlag = false
		},

		showBatchAdjustModal() {
			this.showBatchAdjustModalFlag = true
			this.selectedStudents = []
			this.batchAdjustForm = {
				typeIndex: 0,
				hours: '',
				description: ''
			}
		},

		closeBatchAdjustModal() {
			this.showBatchAdjustModalFlag = false
		},

		onBatchAdjustTypeChange(e) {
			this.batchAdjustForm.typeIndex = e.detail.value
		},

		toggleStudent(studentId) {
			const index = this.selectedStudents.indexOf(studentId)
			if (index > -1) {
				this.selectedStudents.splice(index, 1)
			} else {
				this.selectedStudents.push(studentId)
			}
		},

		// 批量充值
		async confirmBatchRecharge() {
			if (!this.batchRechargeForm.hours || parseInt(this.batchRechargeForm.hours) <= 0) {
				uni.showToast({
					title: '请输入有效的充值课时数',
					icon: 'none'
				})
				return
			}

			if (this.selectedStudents.length === 0) {
				uni.showToast({
					title: '请选择要充值的学生',
					icon: 'none'
				})
				return
			}

			uni.showLoading({
				title: '批量充值中...'
			})

			try {
				const token = uni.getStorageSync('token')

				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADMIN_BATCH_RECHARGE),
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					},
					data: {
						studentIds: this.selectedStudents,
						hours: parseInt(this.batchRechargeForm.hours),
						description: this.batchRechargeForm.description || '批量充值'
					}
				})

				uni.hideLoading()

				if (response.code === 200) {
					uni.showToast({
						title: '批量充值成功',
						icon: 'success'
					})
					this.closeBatchRechargeModal()
					// 刷新数据
					this.loadStats()
					this.loadStudentList()
				} else {
					uni.showToast({
						title: response.message || '批量充值失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.hideLoading()
				console.error('批量充值失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		},

		// 批量调整
		async confirmBatchAdjust() {
			if (!this.batchAdjustForm.hours || parseInt(this.batchAdjustForm.hours) <= 0) {
				uni.showToast({
					title: '请输入有效的调整课时数',
					icon: 'none'
				})
				return
			}

			if (!this.batchAdjustForm.description.trim()) {
				uni.showToast({
					title: '请输入调整说明',
					icon: 'none'
				})
				return
			}

			if (this.selectedStudents.length === 0) {
				uni.showToast({
					title: '请选择要调整的学生',
					icon: 'none'
				})
				return
			}

			uni.showLoading({
				title: '批量调整中...'
			})

			try {
				const token = uni.getStorageSync('token')
				const hours = this.batchAdjustForm.typeIndex === 0 ?
					parseInt(this.batchAdjustForm.hours) :
					-parseInt(this.batchAdjustForm.hours)

				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.LESSON_ADMIN_BATCH_ADJUST),
					method: 'POST',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					},
					data: {
						studentIds: this.selectedStudents,
						hours: hours,
						description: this.batchAdjustForm.description
					}
				})

				uni.hideLoading()

				if (response.code === 200) {
					uni.showToast({
						title: '批量调整成功',
						icon: 'success'
					})
					this.closeBatchAdjustModal()
					// 刷新数据
					this.loadStats()
					this.loadStudentList()
				} else {
					uni.showToast({
						title: response.message || '批量调整失败',
						icon: 'none'
					})
				}
			} catch (error) {
				uni.hideLoading()
				console.error('批量调整失败:', error)
				uni.showToast({
					title: '网络错误，请重试',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #0B0F1A 0%, #1a1f2e 100%);
	padding-bottom: 120rpx;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 200rpx;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.1) 0%, rgba(25, 118, 210, 0.1) 100%);
		z-index: 0;
	}
}

.search-bar {
	margin: 20rpx;
	position: relative;
	z-index: 1;

	.search-input {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 44rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		border: 2rpx solid #2a2f3e;
		transition: all 0.3s ease;
		box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
		backdrop-filter: blur(10rpx);

		&:focus {
			border-color: #00B8D4;
			box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
			transform: scale(1.02);
		}

		&::placeholder {
			color: rgba(170, 180, 190, 0.6);
		}
	}
}

.stats-cards {
	margin: 20rpx;
	display: flex;
	gap: 20rpx;
	position: relative;
	z-index: 1;

	.stat-card {
		flex: 1;
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		text-align: center;
		border: 1rpx solid #2a2f3e;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
		transition: all 0.3s ease;
		backdrop-filter: blur(10rpx);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.05) 0%, rgba(25, 118, 210, 0.05) 100%);
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.3);

			&::before {
				opacity: 1;
			}
		}

		.stat-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 184, 212, 0.3);
			position: relative;
			z-index: 1;

			.icon-text {
				font-size: 28rpx;
			}
		}

		.stat-content {
			flex: 1;
			position: relative;
			z-index: 1;

			.stat-number {
				display: block;
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 4rpx;
			}

			.stat-label {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
	}
}

.filter-section {
	margin: 20rpx;

	.filter-tabs {
		display: flex;
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 20rpx;
		padding: 8rpx;
		border: 1rpx solid #2a2f3e;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);

		.filter-tab {
			flex: 1;
			padding: 16rpx 20rpx;
			text-align: center;
			border-radius: 16rpx;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			&.active {
				&::before {
					opacity: 1;
				}

				.tab-text {
					color: #FFFFFF;
					position: relative;
					z-index: 1;
				}
			}

			.tab-text {
				font-size: 26rpx;
				color: #AAB4BE;
				transition: color 0.3s ease;
				position: relative;
				z-index: 1;
			}
		}
	}
}

.student-list {
	margin: 20rpx;
}

.list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #2a2f3e;

	.list-title {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.list-count {
		font-size: 26rpx;
		color: #AAB4BE;
	}
}

.student-item {
	background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1rpx solid #2a2f3e;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	backdrop-filter: blur(10rpx);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.05) 0%, rgba(25, 118, 210, 0.05) 100%);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	&:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.3);
		border-color: #3a3f4e;

		&::before {
			opacity: 1;
		}
	}

	.student-info {
		display: flex;
		align-items: center;
		flex: 1;
		position: relative;
		z-index: 1;

		.student-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
			border: 3rpx solid #3a3f4e;
			transition: all 0.3s ease;

			&:hover {
				border-color: #00B8D4;
				transform: scale(1.05);
			}
		}

		.student-details {
			flex: 1;

			.student-name {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.student-phone {
				display: block;
				font-size: 26rpx;
				color: #AAB4BE;
				margin-bottom: 8rpx;
			}

			.hours-info {
				display: flex;
				align-items: center;

				.hours-label {
					font-size: 26rpx;
					color: #AAB4BE;
					margin-right: 8rpx;
				}

				.hours-number {
					font-size: 28rpx;
					font-weight: bold;

					&.normal {
						color: #4cd964;
					}

					&.low {
						color: #ff9800;
					}

					&.expired {
						color: #f44336;
					}
				}

				.hours-unit {
					font-size: 24rpx;
					color: #AAB4BE;
					margin-left: 8rpx;
				}
			}
		}
	}

	.student-actions {
		display: flex;
		gap: 16rpx;

		.action-btn {
			padding: 12rpx 20rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			border: none;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}

			&.recharge-btn {
				background: rgba(76, 217, 100, 0.2);
				border: 1rpx solid #4cd964;
				color: #4cd964;

				&:hover {
					background: rgba(76, 217, 100, 0.3);
				}
			}

			&.adjust-btn {
				background: rgba(255, 152, 0, 0.2);
				border: 1rpx solid #ff9800;
				color: #ff9800;

				&:hover {
					background: rgba(255, 152, 0, 0.3);
				}
			}

			&.detail-btn {
				background: rgba(0, 184, 212, 0.2);
				border: 1rpx solid #00B8D4;
				color: #00B8D4;

				&:hover {
					background: rgba(0, 184, 212, 0.3);
				}
			}
		}
	}
}

.loading-state {
	text-align: center;
	padding: 80rpx 0;
	color: #AAB4BE;
	background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
	border-radius: 20rpx;
	margin: 20rpx;
	border: 1rpx solid #2a2f3e;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);

	.loading-icon {
		font-size: 100rpx;
		margin-bottom: 20rpx;
		opacity: 0.6;
	}

	.loading-text {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
}

.empty-state {
	text-align: center;
	padding: 80rpx 0;
	color: #AAB4BE;
	background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
	border-radius: 20rpx;
	margin: 20rpx;
	border: 1rpx solid #2a2f3e;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);

	.empty-icon {
		font-size: 100rpx;
		margin-bottom: 20rpx;
		opacity: 0.6;
	}

	.empty-title {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.empty-desc {
		font-size: 24rpx;
		color: #AAB4BE;
		opacity: 0.8;
	}
}

.batch-actions {
	position: fixed;
	bottom: 40rpx;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 20rpx;
	z-index: 100;

	.batch-btn {
		background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.3);
		transition: all 0.3s ease;
		border: none;
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: left 0.5s ease;
		}

		&:active {
			transform: scale(0.95);
			box-shadow: 0 4rpx 16rpx rgba(25, 118, 210, 0.4);

			&::before {
				left: 100%;
			}
		}

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 12rpx 40rpx rgba(25, 118, 210, 0.4);
		}

		.batch-icon {
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 12rpx;
			position: relative;
			z-index: 1;
		}

		.batch-text {
			font-size: 26rpx;
			color: #FFFFFF;
			font-weight: 500;
			position: relative;
			z-index: 1;
		}
	}
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;

	.modal-content {
		background: #1a1f2e;
		border-radius: 20rpx;
		width: 90%;
		max-width: 600rpx;
		max-height: 80vh;
		overflow-y: auto;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #2a2f3e;

			.modal-title {
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
			}

			.modal-close {
				font-size: 40rpx;
				color: #AAB4BE;
				line-height: 1;
			}
		}

		.form {
			padding: 30rpx;

			.form-item {
				margin-bottom: 30rpx;

				.form-label {
					display: block;
					font-size: 28rpx;
					color: #FFFFFF;
					margin-bottom: 16rpx;
					font-weight: 500;
				}

				.form-input {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
					border-radius: 16rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border: 2rpx solid #3a3f4e;
					transition: all 0.3s ease;
					box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);

					&:focus {
						border-color: #00B8D4;
						box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					}

					&::placeholder {
						color: rgba(170, 180, 190, 0.6);
					}
				}

				.form-textarea {
					width: 100%;
					height: 140rpx;
					background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
					border-radius: 16rpx;
					padding: 24rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border: 2rpx solid #3a3f4e;
					transition: all 0.3s ease;
					box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					resize: none;

					&:focus {
						border-color: #00B8D4;
						box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					}

					&::placeholder {
						color: rgba(170, 180, 190, 0.6);
					}
				}

				.form-picker {
					width: 100%;
					height: 88rpx;
					background: linear-gradient(135deg, #2a2f3e 0%, #3a3f4e 100%);
					border-radius: 16rpx;
					padding: 0 24rpx;
					border: 2rpx solid #3a3f4e;
					display: flex;
					align-items: center;
					transition: all 0.3s ease;
					box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					position: relative;

					&::after {
						content: '▼';
						position: absolute;
						right: 24rpx;
						color: #AAB4BE;
						font-size: 20rpx;
						pointer-events: none;
					}

					&:active {
						border-color: #00B8D4;
						box-shadow: 0 0 0 4rpx rgba(0, 184, 212, 0.2), inset 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
					}

					.picker-text {
						font-size: 28rpx;
						color: #FFFFFF;
						flex: 1;
					}
				}

				.student-selector {
					max-height: 300rpx;
					overflow-y: auto;
					border: 2rpx solid #3a3f4e;
					border-radius: 16rpx;
					background: #2a2f3e;

					.student-option {
						padding: 20rpx 24rpx;
						border-bottom: 1rpx solid #3a3f4e;
						display: flex;
						justify-content: space-between;
						align-items: center;
						transition: all 0.3s ease;

						&:last-child {
							border-bottom: none;
						}

						&.selected {
							background: rgba(0, 184, 212, 0.2);
							border-color: #00B8D4;
						}

						.option-name {
							font-size: 28rpx;
							color: #FFFFFF;
						}

						.option-hours {
							font-size: 24rpx;
							color: #AAB4BE;
						}
					}
				}
			}
		}

		.modal-actions {
			display: flex;
			gap: 20rpx;
			padding: 30rpx;
			border-top: 1rpx solid #2a2f3e;

			.cancel-btn, .confirm-btn {
				flex: 1;
				height: 80rpx;
				border-radius: 40rpx;
				font-size: 28rpx;
				border: none;
			}

			.cancel-btn {
				background: #2a2f3e;
				color: #AAB4BE;
			}

			.confirm-btn {
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				color: #FFFFFF;
			}
		}
	}
}
</style>
